<!--  -->
<script setup>
import { ref, reactive, toRefs,defineProps, defineEmits, defineExpose, onBeforeMount, onMounted, watchEffect, computed, watch } from 'vue' // eslint-disable-line
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'

// 仓库
const store = useStore() // eslint-disable-line

// 路由对象
const route = useRoute() // eslint-disable-line

// 路由实例
const router = useRouter() // eslint-disable-line

// 组件传值
const props = defineProps({
  index: {
    type: Number,
    required: true
  }
})
const emits = defineEmits([]) // eslint-disable-line

// 数据部分
ref() // eslint-disable-line
reactive() // eslint-disable-line

// methods集合
// 刷新
const onRefreshClick = () => {
  router.go(0)
}

const onCloseRightClick = () => {
  store.commit('app/removeTagsView', {
    type: 'right',
    index: props.index
  })
}

const onCloseOtherClick = () => {
  store.commit('app/removeTagsView', {
    type: 'other',
    index: props.index
  })
}

// 组件挂载页面之前执行
onBeforeMount(() => {})

// 组件挂载到页面之后执行
onMounted(() => {})

watchEffect(() => {})

// 使用toRefs解构
// let {} = { ...toRefs(data) } // eslint-disable-line

// 组件方法暴露
// defineExpose()

</script>
<template>
    <ul class="context-menu-container">
    <li @click="onRefreshClick">
      {{ $t('msg.tagsView.refresh') }}
    </li>
    <li @click="onCloseRightClick">
      {{ $t('msg.tagsView.closeRight') }}
    </li>
    <li @click="onCloseOtherClick">
      {{ $t('msg.tagsView.closeOther') }}
    </li>
  </ul>
</template>

<style scoped lang='scss'>
  .context-menu-container {
  position: fixed;
  background: #fff;
  z-index: 3000;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
    &:hover {
      background: #eee;
    }
  }
}
</style>
